/*
 * Twitter Bootstrap.
 */

$border-width: 1px;
$btn-padding-x: 1rem !default;
$btn-padding-y: .475rem !default;
$btn-font-weight: normal !default;
$btn-border-radius: 3px;

$font-size-base: 15px;
$line-height: 15px;

$btn-primary-color: #fff !default;
$btn-primary-bg: $reactorPrimary;
$btn-primary-border: $reactorPrimary;

@mixin hover {
  &:hover { @content }
}

@mixin hover-focus {
  &:focus,
  &:hover {
    @content
  }
}

@mixin plain-hover-focus {
  &:focus,
  &:hover {
    @content
  }
}

@mixin hover-focus-active {
  &:focus,
  &:active,
  &:hover {
    @content
  }
}

@mixin button-variant($color, $background, $border) {
  $active-background: darken($background, 10%);
  $active-border: darken($border, 12%);

  color: $color;
  background-color: $background;
  border-color: $border;
  font-family: 'Montserrat', sans-serif;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075);

  @include hover {
    color: $color;
    background-color: $active-background;
    border-color: $active-border;
    text-decoration: none;
  }

  &:focus,
  &.focus {
    color: $color;
    background-color: $active-background;
    border-color: $active-border;
  }

  &:active,
  &.active,
  .open > &.dropdown-toggle {
    color: $color;
    background-color: $active-background;
    border-color: $active-border;
    // Remove the gradient for the pressed/active state
    background-image: none;
    box-shadow: inset 0 3px 5px rgba(0,0,0,.125);

    &:hover,
    &:focus,
    &.focus {
      color: $color;
      background-color: darken($background, 17%);
      border-color: darken($border, 25%);
    }
  }

  &.disabled,
  &:disabled {
    &:focus,
    &.focus {
      background-color: $background;
      border-color: $border;
    }
    @include hover {
      background-color: $background;
      border-color: $border;
    }
  }
}

@mixin button-outline-variant($color) {
  color: $color;
  background-image: none;
  background-color: transparent;
  border-color: $color;

  &:focus,
  &.focus,
  &:active,
  &.active,
  .open > &.dropdown-toggle {
    color: #fff;
    background-color: $color;
    border-color: $color;
  }
  @include hover {
    color: #fff;
    background-color: $color;
    border-color: $color;
  }

  &.disabled,
  &:disabled {
    &:focus,
    &.focus {
      border-color: lighten($color, 20%);
    }
    @include hover {
      border-color: lighten($color, 20%);
    }
  }
}

// Button sizes
@mixin button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {
  padding: $padding-y $padding-x;
  font-size: $font-size;
  line-height: $line-height;
  border-radius: $border-radius;
}


@mixin tab-focus() {
  // Default
  outline: thin dotted;
  // WebKit
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}


.btn {
  display: inline-block;
  font-weight: $btn-font-weight;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  user-select: none;
  border: $border-width solid transparent;
  @include button-size($btn-padding-y, $btn-padding-x, $font-size-base - 1px, $line-height, $btn-border-radius);
  transition: all .2s ease-in-out;

  &,
  &:active,
  &.active {
    &:focus,
    &.focus {
      @include tab-focus();
    }
  }

  /*@include hover-focus {
    text-decoration: none;
  }*/
  &.focus {
    text-decoration: none;
  }

  &:active,
  &.active {
    background-image: none;
    outline: 0;
    box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
  }

  &.disabled,
  &:disabled {
    cursor: not-allowed;
    opacity: .65;
    box-shadow: none;
  }
}

// Future-proof disabling of clicks on `<a>` elements
a.btn.disabled,
fieldset[disabled] a.btn {
  pointer-events: none;
}

.btn-primary {
  @include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
}
.btn-default {
  @include button-variant(#444, #e4e8ea, #e4e8ea);
}